﻿@using Shop.Web.Models

@{
    ViewData["Title"] = "角色管理";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<div id="app" v-clock>
    <div class="querybar">
        <span v-if="searchParam.showName">角色名称：<el-input v-model="Name" size="mini" class="col-sm-2" placeholder="请输入角色名称" clearable></el-input></span>
        <span v-if="searchParam.showIsDel">
            删除状态：<el-select v-model="IsDel" size="mini" class="col-sm-1" placeholder="请选择删除状态">
                <el-option v-for="item in delOption"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
            </el-select>
        </span>
        @SystemHelper.ButtonSearch()
        @SystemHelper.ButtonSetSearch()
        @SystemHelper.ButtonSetColums()
    </div>
    <div class="querybar">
        @SystemHelper.ButtonAdd()
        @SystemHelper.ButtonEdit()
        @SystemHelper.ButtonDel()
        @SystemHelper.ButtonSetFunction()
    </div>
    <div class="querybar" v-if="showParam">
        <el-checkbox v-model="searchParam.showName">菜单名称</el-checkbox>
        <el-checkbox v-model="searchParam.showIsDel">删除状态</el-checkbox>
    </div>
    <div class="querybar" v-if="showColumn">
        <template v-for="v in filterRow">
            <el-checkbox v-model="v.show">{{v.title}}</el-checkbox>
        </template>
    </div>
    <template>
        <el-table ref="singleTable" v-bind:data="tableData" @@current-change="handleSelectRow" highlight-current-row style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <template v-for="x in filterRow">
               
                <el-table-column v-bind:label="x.title" v-bind:width="x.width" v-if="x.show &&  x.filed=='isDel'" align="center">
                    <template scope="p">
                        <el-checkbox v-model="p.row.isDel" disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column v-bind:property="x.filed" v-bind:label="x.title" v-bind:width="x.width" v-if="x.show && x.filed!='isDel'"></el-table-column>
            </template>
        </el-table>
    </template>
    <home-page v-on:refreshbizlines="search" ref="homePage"></home-page>
</div>
@Html.Partial("_HomePage")
@section Scripts
    {
    <script>
        new Vue({
            el: "#app",
            data: function() {
                return {
                    buttons: btns,@* 系统权限控制 *@
                    currentRow: null,
                    showParam: false,
                    showColumn: false,
                    showOpt: false,
                    tableData: [],
                    reqUrl: {
                        get: '@Url.Action("GetList")',
                        del:'@Url.Action("Delete")'
                    },
                    filterRow: [
                        { filed: 'roleName', title: '角色名称', show: true, width: 120 },
                        { filed: 'remarks', title: '说明', show: true, width: '' },
                        { filed: 'users', title: '角色用户', show: true, width: '' },
                        { filed: 'isDel', title: '删除', show: false, width: 60 },
                        { filed: 'createAt', title: '创建日期', show: true, width: 120 },
                        { filed: 'createName', title: '创建人', show: true, width: 120 },
                        { filed: 'updateAt', title: '更新日期', show: false, width: 120 },
                        { filed: 'updateName', title: '更新人', show: false, width: 120 }
                    ],
                    Name: '', 
                    IsDel:0,
                    searchParam: {
                        showName:true, 
                        showIsDel:false
                    },
                    delOption: [{ label: '全部', value: -1 }, { label: '未删除', value: 0 }, { label: '已删除', value: 1 }]
                }
            },
            created: function() {

            },
            mounted: function() {
                this.searchs();
            },
            update: function() {

            },
            watch: {
            },
            methods: {
                funSetParam: function() {
                    this.showParam = !this.showParam;
                },
                funSetColumns: function() {
                    this.showColumn = !this.showColumn;
                },
                funSetShowOpt: function() {
                    this.showOpt = !this.showOpt;
                },
                handleSelectRow: function(row) {
                    this.currentRow = row;
                },
                searchs: function () {
                    if (this.buttons.GetList) {
                        this.$refs.homePage.currentPage = 1;
                        this.search();
                    } 
                },
                search: function() {
                    var vm = this;
                    var param = {
                        pageIndex: 1,
                        pageSize: 15,
                        name: vm.Name,
                        parentId: vm.ParentId,
                        isDel:vm.IsDel
                }
                    ajaxRequestGetData(vm.reqUrl.get,
                        param,
                        function(data) {
                            vm.tableData = data.data.list;
                            vm.$refs.homePage.total = data.data.total;
                        })
                },
                funAdd: function() {
                    window.location = '@Url.Action("Edit")';
                },
                funEdit: function () {
                    if (this.currentRow == null || this.currentRow == undefined) {
                        window.messageAlert('请选择要编辑的角色', 3, 3);
                        return;
                    }
                    if (this.currentRow.isDel===true) {
                        window.messageAlert('该角色已删除不可编辑', 3, 3);
                        return;
                    }
                    window.location = '@Url.Action("Edit")?roleId='+this.currentRow.id;
                },
                funDel: function () {
                    if (this.currentRow == null || this.currentRow == undefined) {
                        window.messageAlert('请选择要删除的角色', 3, 3);
                        return;
                    }
                    if (this.currentRow.isDel===true) {
                        window.messageAlert('该角色已删除', 3, 3);
                        return;
                    }
                    var vm = this;
                    window.showConfirm(vm, '提示', '确定要删除【' + this.currentRow.roleName + '】?', function (re) {
                        if (re) {
                            var param = {
                                id:vm.currentRow.id
                            }
                            ajaxRequestPostData(vm.reqUrl.del, param, function(data) {
                                if (data.code === messageType.success) {
                                    vm.searchs();
                                }
                            })
                        }
                    })
                },
                funSetFunction: function() {
                    if (this.currentRow == null || this.currentRow == undefined) {
                        window.messageAlert('请选择要设置功能的角色', 3, 3);
                        return;
                    }
                    if (this.currentRow.isDel===true) {
                        window.messageAlert('该角色已删除不可设置功能', 3, 3);
                        return;
                    }
                    window.location = '@Url.Action("SetFunction")?roleId='+this.currentRow.id;
                }
            },
            computed: {
            }, components: {
                'homePage': homePages//分页
            }
        })
    </script>
}